<!DOCTYPE html>
<html>
<head>
    <title>Data binding</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">
    <ul id="flat-listview"></ul>
</div>

<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">
     <ul id="grouped-listview"></ul>
</div>

<div data-role="layout" data-id="databinding">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#flat" data-icon="stop">Flat
            </a><a href="#grouped" data-icon="organize">Grouped</a>
        </div>
    </div>
</div>

<script>
    var groupedData = [
        {name: "Sashimi salad", letter: "S" },
        {name: "Chirashi sushi", letter: "C" },
        {name: "Seaweed salad", letter: "S" },
        {name: "Edamame", letter: "E" },
        {name: "Miso soup", letter: "M" },
        {name: "Maguro", letter: "M" },
        {name: "Shake", letter: "S" },
        {name: "Shiromi", letter: "S" },
        {name: "Tekka maki", letter: "T" },
        {name: "Hosomaki Mix", letter: "H" },
        {name: "California rolls", letter: "C" },
        {name: "Seattle rolls", letter: "S" },
        {name: "Spicy Tuna rolls", letter: "S" },
        {name: "Ebi rolls", letter: "E" },
        {name: "Chicken Teriyaki", letter: "C" },
        {name: "Salmon Teriyaki", letter: "S" },
        {name: "Gohan", letter: "G" },
        {name: "Tori Katsu", letter: "T" },
        {name: "Yaki Udon", letter: "Y" }
    ];


    var flatData = [ "Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon" ];

    function mobileListViewDataBindInitFlat() {
        $("#flat-listview").kendoMobileListView({ dataSource: flatData });
    }

    function mobileListViewDataBindInitGrouped() {
        $("#grouped-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter"}),
            template: "${name}",
            fixedHeaders: true
        });
    }
</script>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
